<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { queryTree } from '@/api/set/goodscategory'
import { query } from '@/api/set/Supplier'
import { ElMessage } from "element-plus";
import { getUser } from "@/utils/session.js";
//声明属性
const props = defineProps({
  "visible": {
    type: Boolean,
    default: false
  }
})

//获取用户信息
let user = {};
//分页参数
const page = ref(1);//默认第一页
const pageSize = ref(10);//每页显示条数
const total = ref(0);//总条数
/**
 * 分页
 * @param pg 第几页
 */
function chgpg(pg) {
  page.value = pg;
  initData();
}

/**
 * 分页
 * @param pgSize 每页多少条
 */
function chg(pgSize) {
  pageSize.value = pgSize;
  page.value = 1;
  initData();
}
//声明事件
const emits = defineEmits(["close", "choose"])
const data = ref([])
const defaultProps = {
  children: "children",
  label: "name"
}
//数据
const tableData = ref([])
async function initData() {
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    eid: getUser().eid,
    status: 1
  }
  let res = await query(data);
  if (res.code == 200) {
    tableData.value = res.data.list
    page.value = res.data.page
    pageSize.value = res.data.pageSize
    total.value = res.data.total
  }
}
//选择
function choose(row) {
  emits("choose", row)
  cls();
}
//关闭窗口
function cls() {
  //抛出自定义事件
  emits("close");
}
//生命周期-----------
onMounted(() => {
  initData();
  user = getUser();
})
</script>

<template>
  <div>
    <el-dialog :model-value="visible" :close-on-click-modal="false" title="供应商选择(双击行选择)" width="600" @close="cls">
      <!--    供应商列表    -->
      <el-table :data="tableData" style="width: 100%" border stripe ref="goodslist" title="双击选择" @row-dblclick="choose">
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column prop="code" label="供应商编码" width="120" header-align="center" align="center" />
        <el-table-column prop="name" label="供应商名称" width="120" header-align="center" align="center" />
        <el-table-column prop="user" label="联系人" width="120" header-align="center" align="center" />
        <el-table-column prop="mobile" label="手机号" width="153" header-align="center" align="center" />
      </el-table>
      <div style="margin:40px auto; width: 500px;">
        <el-pagination background @current-change="chgpg" @size-change="chg" :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40, 50, 100]" layout="total,sizes,prev, pager, next,jumper" :total="total" />
      </div>
    </el-dialog>
  </div>
</template>

<style scoped></style>